<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-08-16 09:02:27
 * @LastEditors: tc
 * @LastEditTime: 2022-02-22 17:32:12
-->
<template>
    <div class="maintenance-box">
       <div class="bar" ref="bar1"></div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            barCharts: null,
            year: new Date().getFullYear(),
            startYearAndMonth: '',
            endYearAndMonth: '',
            yqStatistics: [],
            sqStatistics: [],
            rrStatistics: [],
            ssStatistics: [],
            dxswStatistics: [],
            xData: []
        }
    },
    watch: {
        data: {
            handler(val) {
                // const that = this
                // that.renderData(val)
                // that.barCharts.setOption(that.setOption())
                this.init()
            },
            deep:true
        }
    },
    mounted() {
        this.init()
    },
    unmounted() {
        this.barCharts.dispose()
    },
    methods: {
        init() {
            const that = this
            let myCharts = null
            myCharts = that.$echarts.init(that.$refs.bar1)
            that.barCharts = myCharts
            myCharts.setOption(that.setOption())
            window.addEventListener('resize', function() {
                myCharts.resize()
            })
        },
        setOption() {
            const that =this
            let option = {
                grid: {
                    top: '15%',
                    left: '5%',
                    right: '0%',
                    bottom: '10%',
                },
                 xAxis: {
                    type: 'category',
                    data: that.data.monitorTime
                },
                yAxis: {
                    type: 'value',
                    // max: 20,
                    // min: -20,
                    name: 'mm'
                },
                legend: {
                    data: ['北位移' ,'东位移']
                },
                series: [
                    {
                        name: '北位移',
                        data: that.data.n,
                        type: 'line',
                        smooth: true,
                        lineStyle: { color: '#3DA7F3'},
                        itemStyle: { color: '#3DA7F3'},
                        // label: {show: true}
                    },
                    {
                        name: '东位移',
                        data: that.data.e,
                        type: 'line',
                        smooth: true,
                        lineStyle: { color: '#1EC016'},
                        itemStyle: { color: '#1EC016'},
                    },
                    {
                        name: 'max',
                        data: [10, 10, 10, 10, 10, 10, 10,10, 10, 10, 10, 10, 10, 10,10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
                        type: 'line',
                        symbol: 'none',
                        lineStyle: { color: '#FF9C4C'}
                        
                    },
                    {
                        name: 'min',
                        data: [-10, -10, -10, -10, -10, -10, -10,-10, -10, -10, -10, -10, -10, -10,-10, -10, -10, -10, -10, -10, -10, -10, -10, -10],
                        type: 'line',
                        symbol: 'none',
                        lineStyle: { color: '#FF9C4C'}
                    }
                ]
            }
            return option
        }
    }
}
</script>

<style lang="scss" scoped>
.maintenance-box {
    height: 100%;
    box-sizing: border-box;
    .bar {
        height: 100%;
    }
}
</style>